<template>
    <el-breadcrumb class="header-breadcrumb" separator="/">
        <el-breadcrumb-item v-for="item in labelList" :key="item.meta.title">
            <a v-if="labelList.length > 1 && item.meta.title == '首页'" 
                @click.prevent="jump(item.path)"
            >
                {{item.meta.title}}
            </a>
            <span v-else>{{item.meta.title}}</span>
         </el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script>
export default {
    watch: {
        $route: {
            handler() {
                this.getLabelList()
            }
        }
    },
    data() {
        return {
            labelList: []
        }
    },
    methods: {
        getLabelList() {
            let matcheds = this.$route.matched.filter(item => item.meta && item.meta.title)
            if(matcheds[0].name == 'Home') {
                this.labelList = matcheds
            } else {
                this.labelList = matcheds
                this.labelList.unshift({path:'/home', meta: {title: '首页'}})
            }
        },
        jump(path) {
            this.$router.push(path)
        }
    },
    created() {
        this.getLabelList()
    }
}
</script>
<style scoped>
.header-breadcrumb {
    float:left;
    line-height: 60px;
    margin-left:16px
}
</style>